﻿<!DOCTYPE html>
<html style="height: 100%;">
<head>
    <title>UCosmic February 2012 Preview 1 is on it's way...</title>
    <style>
        /* zero margins */
        html, body
        {
            margin: 0;
            padding: 0;
            font-family: Arial, Sans-Serif;
            color: #444;
            background: #5c87b2;
        }
        h1
        {
            font-size: 1.6em;
            margin: 0;
            padding: 0;
            font-weight: normal;
        }
        h1 .smaller
        {
            font-size: smaller;
        }
        p
        {
            margin: 1em 0 0;
            padding: 0;
        }
        /* position:fixed */
        .outer
        {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        /* certering */
        .middle
        {
            height: 100%;
            display: table;
            margin: 0 auto;
        }
        .inner
        {
            vertical-align: middle;
            display: table-cell;
        }
        .card
        {
            overflow: auto;
            width: 630px;
            padding: 30px;
            background: #fff;
            border-radius: 30px;
            -moz-border-radius: 30px;
        }
        .righted
        {
            float: right;
        }
        .lefted
        {
            float: left;
            margin-right: 1em;
        }
    </style>
    <!--[if lte IE 6]>
    <style>
        /* position:fixed for ie6 */
        html { overflow-x:auto; overflow-y:hidden; }
        body { overflow-y:auto; height:100%; }
        .outer { position:absolute; }
    </style>
    <![endif]-->
    <!--[if lte IE 7]>
    <style>
        /* centering for ie6/ie7 */
        .middle { position:absolute; top:50%; left:50%; height:auto; }
        .inner { position:relative; top:-50%; left:-50%; }
    </style>
    <![endif]-->
</head>
<body>
    <div class="outer">
        <div class="middle">
            <div class="inner">
                <div class="card">
                    <div class="lefted">
                        <img alt="picture of wrench around planet earth" src="" />
                    </div>
                    <h1>
                        UCosmic February 2012 Preview 1
                        <br />
                        <span class="smaller">is currently being deployed</span>
                    </h1>
                    <p>
                        Please come back in a couple of hours.
                    </p>
                    <p>
                        Thanks,
                    </p>
                    <p>
                        The UCosmic Team
                    </p>
                    <div style="margin-top: 3em;">
                        <img alt="progress bar" src="" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
